{{ define "goods/goods.html" }}
{{/*引用其他模板 注意后面的 . */}}
{{/* 引入头部 */}}
{{ template "header" . }}

<body>
    <div class="content" id="app">
        <a href="/home.html">
            点击返回首页
        </a>
        <div>
            hello, {{ .result.name }}, level {{ .result.level }}
        </div>
        <button class="btn" id="JS_dialog" @click="editBox(0)">添加商品</button>
        <table border="1" class="goods">
            <tr>
                <th>商品ID</th>
                <th>名称</th>
                <th>描述</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr id="lists" v-for="item,key in lists">
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.detail}</td>
                <td>${item.create_time_str}</td>
                <td>
                    <button @click="editBox(item.id)">修改</button>
                    <button @click="delBox(item.id)">删除</button>
                </td>
            </tr>
        </table>
        <!--遮罩层-->
        <div class="black" :class="box"></div>
        <!--弹出框盒子-->
        <div class="dialog" :class="box">
            <span style="display: inline-block;">商品操作</span>
            <span class="dialog_close" style="display: inline-block;padding-left: 470px;border-bottom: 1px solid #eee;">
                <span @click="closeBox" style="cursor:pointer;">X</span>
            </span>
            <form method="post" onSubmit="return false;" class="goods editBox">
                名称:<input type="text" name="name" v-model="name" /><br>
                描述:<input type="text" name="detail" v-model="detail" /> <br>
                <button @click="send">提交</button>
                <button @click="closeBox">取消</button>
            </form>
        </div>
    </div>
</body>
<style type="text/css">
.black {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.1);
    top: 0;
    left: 0;
}

.dialog {
    position: fixed;
    z-index: 3;
    width: 500px;
    min-height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

.hide {
    display: none;
}

.show {
    display: block !important;
}

.editBox {
    line-height: 50px;
}
</style>
<script src="/static/js/axios.min.js">
</script>
<script src="/static/js/sweetalert2.min.js">
</script>
<link rel="stylesheet" type="text/css" href="/static/css/sweetalert2.min.css">
<script>
const { createApp, reactive, toRefs, onMounted } = Vue;

const EventHandle = {
    // 解决与go变量渲染冲突
    compilerOptions: {
        delimiters: ['${', '}'],
        comments: true
    },
    setup() {
        const globalData = reactive({
            lists: [],
            box: "hide",
            page: 0,
            pageSize: 20,
            name: '',
            detail: '',
        });

        onMounted(() => {
            getlist();
        });

        function getlist() {
            let formData = new FormData();
            formData.append('page', globalData.page);
            formData.append('pageSize', globalData.pageSize);

            axios({
                url: '/api/goods_lists',
                method: 'post',
                data: formData,
                headers: {
                    'ApiToken': 'demo_token',
                    'Content-Type': 'application/json; charset=UTF-8',
                },
            }).then(function(response) {
                let res = response.data
                globalData.lists.push(...res.lists);
            }).catch(function(error) {
                console.log(error);
            });
        }

        function editBox(id) {
            console.log(id);
            globalData.id = id;
            globalData.box = "show";
            if (id > 0) {
                let formData = new FormData();
                formData.append('id', globalData.id);
                axios({
                    url: '/api/goods_detail',
                    method: 'post',
                    data: formData,
                    headers: {
                        'ApiToken': 'demo_token',
                        'Content-Type': 'application/json; charset=UTF-8',
                    },
                }).then(function(response) {
                    goods = response.data.lists;
                    globalData.name = goods.name;
                    globalData.detail = goods.detail;
                }).catch(function(error) {
                    console.log(error);
                });
            } else {
                globalData.name = "";
                globalData.detail = "";
            }
        }

        function closeBox() {
            globalData.box = "hide";
        }

        function send() {
            if (globalData.name == '') {
                Swal.fire({
                    text: '名称不能为空',
                    icon: 'warning',
                    timer: 2000,
                })
                return false;
            }
            let formData = new FormData();
            formData.append('id', globalData.id);
            formData.append('name', globalData.name);
            formData.append('detail', globalData.detail);
            axios({
                url: '/api/goods_operate',
                method: 'post',
                data: formData,
                headers: {
                    'ApiToken': 'demo_token',
                    'Content-Type': 'application/json; charset=UTF-8',
                },
            }).then(function(response) {
                console.log(response)
                closeBox();
                if (response.data.code == 0) {
                    globalData.lists = [];
                    getlist();
                }
                Swal.fire({
                    text: response.data.msg,
                    icon: 'success',
                    timer: 2000,
                })
            }).catch(function(error) {
                console.log(error);
            });
        }

        function delBox(id) {
            Swal.fire({
                title: '',
                text: '确定删除吗？',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '确定',
                cancelButtonText: `取消`,
            }).then((result) => {
                if (result.isConfirmed) {
                    console.log('goods_del')
                    let formData = new FormData();
                    formData.append('id', id);
                    axios({
                        url: '/api/goods_del',
                        method: 'post',
                        data: formData,
                        headers: {
                            'ApiToken': 'demo_token',
                            'Content-Type': 'application/json; charset=UTF-8',
                        },
                    }).then(function(response) {
                        console.log(response)
                        if (response.data.code == 0) {
                            globalData.lists = [];
                            getlist();
                        }
                        Swal.fire({
                            text: response.data.msg,
                            icon: 'success',
                            timer: 2000,
                        })
                    }).catch(function(error) {
                        console.log(error);
                    });
                }
            });
        }
        return {
            ...toRefs(globalData),
            getlist,
            editBox,
            closeBox,
            send,
            delBox,
        }
    }
}

const app = createApp(EventHandle);
app.mount("#app");
</script>
{{/* 引入脚部 */}}
{{ template "footer" . }}
{{ end }}